<template>
<h1>下载方式</h1>

<br>
<ol>
    <li>服务器可访问资源</li>
    <span>例: https://example.com/data.xlsx</span>
    <br>
    <sapn>a标签指向该资源可以直接下载： <a href="/public/test.xlsx">下载实例excel文件</a></sapn>

    <br>
    <li>静态资源构建静态地址</li>
    <input :value="value"/>
    <button type="button" @click="makeUrl">生成静态地址</button>
    <br>
    {{ url }}
    <br>
    <a :href="url" v-show="showUrl" download="file.txt">下载静态地址文件</a>
    <li>服务器传递字节流数据下载</li>
    <button type="button" @click="down">构建服务器字节流数据</button>
    <button type="button" @click="down2">构建服务器字节流数据2</button>
    <br>
    <span>接受服务器字节流使用构建静态资源地址的方法构建资源地址指向a标签</span>
    <br>
    <br>
    <span>后端接口的字节流必须是文件格式的字节流下载后才可以解析，对于go语言结构体数据需要包装为所需文件字节流数据，文件类型直接读用文件库读取即可</span>

    <li>后端接口包装数据</li>
    <br>
    <button type="button" @click="down3">后端接口字节流</button>
</ol>
</template>
<script>
export default{
    data(){
        return{
            value: '请输入数据',
            url:'',
            showUrl: false,
        }
    },
    methods:{
        makeUrl(){
            let obj = this.value
            const jsonString = JSON.stringify(obj);
            const blob = new Blob([jsonString], { type: 'text/plain' });
            let url = window.URL.createObjectURL(blob)
            this.url = url
            this.showUrl = true
            console.log(url);
            window.URL.revokeObjectURL(url)
        },
        down(){
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:8080/download-excel",true);
            xhr.responseType = 'arraybuffer'; // 或者 'blob'
            var blob = null
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var byteArray = new Uint8Array(xhr.response);
                    // 处理字节数组
                    let newAattr = document.createElement('a')
                    let url1 = window.URL.createObjectURL(new Blob(byteArray),{type:"application/octet-stream"})
                    newAattr.setAttribute("href",url1)
                    newAattr.setAttribute("download","demo.xlsx")  //没有这一行会直接跳转到字节流页面
                    newAattr.click()
                    window.URL.revokeObjectURL(url1)
                }
            };
            xhr.send();
        },
        down2(){
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:8080/excel-file",true); ///excel-file
            xhr.responseType = 'arraybuffer'; // 或者 'blob'
            var blob = null
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var byteArray = new Uint8Array(xhr.response);
                    // 处理字节数组
                    let newAattr = document.createElement('a')
                    let url1 = window.URL.createObjectURL(new Blob(byteArray),{type:"application/octet-stream"})
                    newAattr.setAttribute("href",url1)
                    newAattr.setAttribute("download","demo.xlsx")  //没有这一行会直接跳转到字节流页面
                    newAattr.click()
                    window.URL.revokeObjectURL(url1)
                }
            };
            xhr.send();
        },

        down3(){
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://localhost:8080/make-file",true); 
            xhr.responseType = 'arraybuffer'; // 或者 'blob'
            var blob = null
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var byteArray = new Uint8Array(xhr.response);
                    // 处理字节数组
                    let newAattr = document.createElement('a')
                    let url1 = window.URL.createObjectURL(new Blob(byteArray),{type:"application/octet-stream"})
                    newAattr.setAttribute("href",url1)
                    newAattr.setAttribute("download","demo.xlsx")  //没有这一行会直接跳转到字节流页面
                    newAattr.click()
                    window.URL.revokeObjectURL(url1)
                }
            };
            xhr.send();
        }
    }
}
</script>
<style scoped>
</style>